import styled from 'styled-components'
import searchIcon from 'assets/images/search.png'
import Border from 'components/style/Border'

const SearchContainer = styled.div`
  height:1.3rem;
  background:${(props)=>props.containerBg};
  display:flex;
  justify-content:center;
  align-items:center;

`

const InputContainer = styled.div`
  width:90%;
  height:0.83rem;
  border-radius:0.2rem;
  /* border:solid 0.01rem orange; */
  display:flex;
  justify-content:center;
  align-items:center;
  background:${(props)=>props.inputBg};
  i {
    width:0.3rem;
    height:0.3rem;
    background:url(${searchIcon});
    display: inline-block;
    background-size: cover;
  }

  input {
    height:100%;
    width:65%;
    border:none;
    background:${(props)=>props.inputBg};
    &::placeholder{
      color:#666666;
    }
  }

  

`

const InputBorderContainer =Border(InputContainer);

export {
  SearchContainer,
  InputContainer,
  InputBorderContainer
}